<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组件使用的细节</title>
	<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
		
		<!--is,因为浏览器解析时table里面直接得有tr,所以用一个属性
			is="组件名"
			is,解决h5的小bug
			组件里面的data必须是一个函数加return
			ref能方便进行dom操作,调用时使用$refs
			像一些浏览器解析会有问题,比如ul列表之类的
			都使用都给下面的直接子标签挂载组件,就不会有bug了
		-->
		<!--在子组件中,data只能是函数必须有function和return,否则将无法显示-->
		<div id="app">
			<table>
			<tbody>
				<!--这样row组件的tr就可以正常在table里了-->
			<tr is="row"></tr>
			<tr is="row"></tr>
			<tr is="row"></tr>
			</tbody>
			</table>
			<ul>
				<li is="uldata"></li>
				<li is="uldata"></li>
				<li is="uldata"></li>
			</ul>
			<div ref="hello"
			     @click="handleclick"
			>
				使用ref操作dom
			</div>
		</div>
		<!--vue操作DOM,非要使用的时候才这样
		ref="节点名",有节点名也就是这个节点的引用,就方便进行操作
		-->
		<script>
			Vue.component('row',{
				template:'<tr><td>this is a td item</td></tr>'
			})
			Vue.component('uldata',{
				data:function(){
                	return{
                		content:'this is a li item'
                	}
                },
                template:'<li>{{content}}</li>'
			})
			let app = new Vue({
                el:"#app",
				methods:{
					handleclick:function() {
						alert(this.$refs.hello.innerHTML)
					}
				}
			})
		</script>
	</body>
</html>
